import './SwiperTemp.scss'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

import dayjs from 'dayjs'
import { Empty, Spin } from 'antd'
import { useEffect, useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Player, BigPlayButton } from 'video-react'
import { Autoplay, Pagination, Navigation, Parallax } from 'swiper'

import { Http } from '../../../../Common/Api'
import { findParentNode } from '../../../../Common/Configure/Common'
import { commonUrl } from '../../../../Common/Configure/CommonParameter'
import { FrontModalBox } from '../Modal'

import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

// 北环新闻
export const SwiperTempA01 = () => {
    const [Data, setData] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })
    useMount(() => {
        runAsync({ url: 'getInfoManage', data: { InfoTypeManageUuid: '274b5459-5ddf-47a1-bb8f-fff9beecb48b' } })
    })

    const [OptionsCall, setOptionsCall] = useState()
    const onOpen = (uuid, title) => setOptionsCall({ type: 'AnnexA01', data: { title: title, data: { uuid } } })

    return (
        <div className="SwiperTempA01">
            {Data ? (
                Data.length !== 0 ? (
                    <div className="Box">
                        <Swiper
                            modules={[Autoplay, Pagination]}
                            className="SwiperBox"
                            loop={true}
                            autoplay={true}
                            pagination={{ clickable: true }}
                        >
                            {(() => {
                                const ImagerList = Data.slice(0, 4)
                                return ImagerList.map(({ uuid, coverUrl, tableName }) => (
                                    <SwiperSlide
                                        className="SwiperItem"
                                        key={uuid}
                                        onClick={() => onOpen(uuid, tableName)}
                                    >
                                        <img src={coverUrl} alt="" />
                                        <div>{tableName}</div>
                                    </SwiperSlide>
                                ))
                            })()}
                        </Swiper>
                        <div className="List">
                            {Data.map(({ uuid, tableName, eventDate }) => (
                                <div key={uuid} onClick={() => onOpen(uuid, tableName)}>
                                    <div>{tableName}</div>
                                    <div>{eventDate}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}

            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const SwiperTempA02 = () => {
    const [Data, setData] = useState()
    const [Active, setActive] = useState()
    const [Details, setDetails] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setData(res.list)
            setActive(res.list[0]?.uuid)
        },
    })
    useMount(() => {
        runAsync({ url: 'getInfoManage', data: { InfoTypeManageUuid: '09ec6cac-4dfc-462d-b1e0-8f38b843e044' } })
    })

    const { runAsync: getDetails } = useRequest(Http, {
        manual: true,
        onSuccess: res => setDetails(res.list),
    })

    useEffect(() => {
        if (Active)
            getDetails({ url: 'getInfoManageDetail', data: { pageIndex: 1, pageSize: 1000, infoManageUuid: Active } })
    }, [Active, getDetails])

    return (
        <div className="SwiperTempA02">
            {Data ? (
                Data.length !== 0 ? (
                    <div className="Box">
                        <div className="List">
                            {Data.map(({ uuid, tableName }) => {
                                return (
                                    <div
                                        key={uuid}
                                        className={Active === uuid ? 'active' : ''}
                                        onClick={() => setActive(uuid)}
                                    >
                                        {tableName}
                                    </div>
                                )
                            })}
                        </div>
                        <div className="Annex">
                            {Details ? (
                                Details.length !== 0 ? (
                                    <Swiper modules={[Navigation]} className="SwiperBox" navigation>
                                        {(() => {
                                            return Details.map(({ uuid, fileUrl }) => (
                                                <SwiperSlide className="SwiperItem" key={uuid}>
                                                    <embed src={fileUrl} />
                                                </SwiperSlide>
                                            ))
                                        })()}
                                    </Swiper>
                                ) : (
                                    <Empty />
                                )
                            ) : (
                                <Spin />
                            )}
                        </div>
                    </div>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
        </div>
    )
}

export const SwiperTempA03 = () => {
    const [OneData, setOneData] = useState()
    const [TwoData, setTwoData] = useState()

    const { runAsync: getOne } = useRequest(Http, { manual: true, onSuccess: res => setOneData(res.list) })
    const { runAsync: getTwo } = useRequest(Http, { manual: true, onSuccess: res => setTwoData(res.list) })

    const [OptionsCall, setOptionsCall] = useState()
    const onOpen = url => {
        if (url) window.open(url)
    }

    useMount(() => {
        getOne({ url: 'getInfoManage', data: { InfoTypeManageUuid: 'f5e2ce53-e8f0-412e-8222-8a827fd13cfc' } })
        getTwo({ url: 'getInfoManage', data: { InfoTypeManageUuid: 'f5e2ce53-e8f0-412e-8222-8a827fd14cfc' } })
    })

    return (
        <div className="SwiperTempA03">
            <div className="Box">
                <img src={imageUrl + 'PartyA01.png'} alt="" />
                {OneData ? (
                    OneData.length !== 0 ? (
                        <div>
                            <div className="List">
                                {OneData.map(({ uuid, tableName, eventDate, currencyA }) => (
                                    <div key={uuid} onClick={() => onOpen(currencyA)}>
                                        <span>{tableName}</span>
                                        <span>{eventDate}</span>
                                    </div>
                                ))}
                            </div>
                            <Swiper
                                modules={[Autoplay, Pagination]}
                                className="SwiperBox"
                                loop={true}
                                autoplay={true}
                                pagination={{ clickable: true }}
                            >
                                {(() => {
                                    const ImagerList = OneData.slice(0, 4)
                                    return ImagerList.map(({ uuid, coverUrl, tableName, currencyA }) => (
                                        <SwiperSlide
                                            className="SwiperItem"
                                            key={uuid}
                                            onClick={() => onOpen(currencyA)}
                                        >
                                            <img src={coverUrl} alt="" />
                                            <div>{tableName}</div>
                                        </SwiperSlide>
                                    ))
                                })()}
                            </Swiper>
                        </div>
                    ) : (
                        <Empty />
                    )
                ) : (
                    <Spin />
                )}
            </div>
            <div className="Box">
                <img src={imageUrl + 'PartyA02.png'} alt="" />
                {TwoData ? (
                    TwoData.length !== 0 ? (
                        <div>
                            <div className="List">
                                {TwoData.map(({ uuid, tableName, eventDate, currencyA }) => (
                                    <div key={uuid} onClick={() => onOpen(currencyA)}>
                                        <span>{tableName}</span>
                                        <span>{eventDate}</span>
                                    </div>
                                ))}
                            </div>
                            <Swiper
                                modules={[Autoplay, Pagination]}
                                className="SwiperBox"
                                loop={true}
                                autoplay={true}
                                pagination={{ clickable: true }}
                            >
                                {(() => {
                                    const ImagerList = TwoData.slice(0, 4)
                                    return ImagerList.map(({ uuid, coverUrl, tableName, currencyA }) => (
                                        <SwiperSlide
                                            className="SwiperItem"
                                            key={uuid}
                                            onClick={() => onOpen(currencyA)}
                                        >
                                            <img src={coverUrl} alt="" />
                                            <div>{tableName}</div>
                                        </SwiperSlide>
                                    ))
                                })()}
                            </Swiper>
                        </div>
                    ) : (
                        <Empty />
                    )
                ) : (
                    <Spin />
                )}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const SwiperTempA04 = () => {
    const [Data, setData] = useState()

    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })

    useMount(() => {
        runAsync({ url: 'getInfoManage', data: { InfoTypeManageUuid: '54e09fec-f1c9-4d10-9d83-e42c2ae993b9' } })
    })

    return (
        <div className="SwiperTempA04">
            <img className="Lef" src={imageUrl + 'MemorabiliaA01.png'} alt="" />
            <img className="Btm" src={imageUrl + 'MemorabiliaA02.png'} alt="" />
            <div className="Box">
                {Data ? (
                    Data.length !== 0 ? (
                        <Swiper className="SwiperBox" slidesPerView={2} slidesOffsetBefore={100}>
                            {Data.map(({ uuid, tableName, coverUrl, eventDate }) => (
                                <SwiperSlide className="SwiperItem" key={uuid}>
                                    <div className="Image">
                                        <img src={coverUrl} alt="" />
                                        <div>{dayjs(eventDate).format('YYYY.MM')}</div>
                                    </div>
                                    <div className="Title">
                                        <div>{tableName}</div>
                                    </div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    ) : (
                        <Empty />
                    )
                ) : (
                    <Spin />
                )}
            </div>
        </div>
    )
}

// 宣传片
export const SwiperTempA05 = ({ importantPartUuid }) => {
    const [TrailerList, setTrailerList] = useState()
    const [active, setActive] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: ({ total, list }) => {
            if (total !== 0) {
                let data = []
                list.forEach(
                    ({ uuid, tableName, videoAttachment, coverAttachment }) =>
                        (data = [
                            ...data,
                            { uuid, title: tableName, url: videoAttachment.fileUrl, image: coverAttachment?.fileUrl },
                        ]),
                )
                setActive(data[0].uuid)
                setTrailerList(data)
            }
        },
    })
    useEffect(() => {
        runAsync({ url: 'getVideos', data: { importantPartUuid } })
    }, [runAsync, importantPartUuid])

    if (TrailerList) {
        return (
            <div className="SwiperTempA05">
                <div className="Video">
                    <Player
                        fluid={false}
                        width={'100%'}
                        height={'100%'}
                        playsInline
                        src={TrailerList[TrailerList.findIndex(v => v.uuid === active)].url}
                    >
                        <BigPlayButton position="center" />
                    </Player>
                </div>
                <div className="List">
                    <Swiper
                        className="TrailerBoxList"
                        direction="vertical"
                        autoplay
                        slidesPerView={3}
                        spaceBetween={20}
                        centeredSlides
                    >
                        {TrailerList.length !== 0 &&
                            TrailerList.map((item, index) => {
                                return (
                                    <SwiperSlide
                                        key={`bannerSwiper${index}`}
                                        style={
                                            active === item.uuid
                                                ? { backgroundImage: `url(${commonUrl}选中阴影.png) ` }
                                                : {}
                                        }
                                        className={active === item.uuid ? 'active' : ''}
                                        onClick={() => {
                                            setActive(item.uuid)
                                        }}
                                    >
                                        <img src={item.image || `${imageUrl}视频背景.png`} alt="" />
                                        <div className="SwiperName">{item.title}</div>
                                    </SwiperSlide>
                                )
                            })}
                    </Swiper>
                </div>
            </div>
        )
    }
}

export const SwiperTempA06 = ({ ParentUuid }) => {
    const [List, setList] = useState()
    const [Avtive, setActive] = useState()
    const [Details, setDetails] = useState([])
    const [ChildAvtive, setChildAvtive] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setList(res[0].children)
            setActive(res[0].children[0].uuid)
            getDetails({
                url: 'getInfoManageGetInfoAndDetailList',
                data: { InfoTypeManageUuid: res[0].children[0].uuid, OEventDate: 'asc@0' },
            })
        },
    })
    useMount(() => {
        runAsync({ url: 'getInfoTypeManage', data: { ParentUuid } })
    })

    const { runAsync: getDetails } = useRequest(Http, {
        manual: true,
        onSuccess: (res, params) => {
            const [{ data }] = params
            const { InfoTypeManageUuid: uuid } = data
            setChildAvtive(res.list[0]?.uuid || null)
            setDetails([...Details, { uuid, children: res.list, list: res.list1 }])
        },
    })

    const onGetDetails = uuid => {
        setActive(uuid)
        setChildAvtive(null)
        if (!Details.some(v => v.uuid.includes(uuid)))
            getDetails({
                url: 'getInfoManageGetInfoAndDetailList',
                data: { InfoTypeManageUuid: uuid, OEventDate: 'asc@0' },
            })
        else {
            const { children } = Details.find(v => v.uuid === uuid)
            if (children?.length !== 0) setChildAvtive(children[0].uuid)
        }
    }

    const onChildClick = uuid => {
        setChildAvtive(uuid)
        setActive(findParentNode(Details, uuid).uuid)
    }

    return (
        <div className="SwiperTempA06">
            {List ? (
                List.length !== 0 ? (
                    <div className="Box">
                        <div className="List">
                            {List.map(({ uuid, tableName }) => (
                                <div
                                    key={uuid}
                                    className={Avtive === uuid ? ' active' : ''}
                                    onClick={() => onGetDetails(uuid)}
                                >
                                    <div className="Title"> {tableName} </div>
                                    {Details.some(v => v.uuid.includes(uuid)) && (
                                        <div className="Child">
                                            {Details.find(v => v.uuid === uuid).children.map(({ uuid, tableName }) => (
                                                <div
                                                    key={uuid}
                                                    onClick={e => {
                                                        e.stopPropagation()
                                                        onChildClick(uuid)
                                                    }}
                                                    className={ChildAvtive === uuid ? 'active' : ''}
                                                >
                                                    {tableName}
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                        <div className="Annex">
                            {(() => {
                                if (ChildAvtive && Details) {
                                    const data = Details.find(v => v.uuid === Avtive)
                                    if (data?.list) {
                                        const annex = data.list.filter(v => v.infoManageUuid === ChildAvtive)
                                        if (annex.length !== 0) {
                                            return (
                                                <Swiper
                                                    modules={[Autoplay, Navigation]}
                                                    className="SwiperBox"
                                                    navigation
                                                    loop={true}
                                                    autoplay={true}
                                                >
                                                    {annex.map(({ uuid, fileUrl }) => (
                                                        <SwiperSlide className="SwiperItem" key={uuid}>
                                                            <img src={fileUrl} alt="" />
                                                        </SwiperSlide>
                                                    ))}
                                                </Swiper>
                                            )
                                        } else return <Empty />
                                    } else return <Empty />
                                } else return <Empty />
                            })()}
                        </div>
                    </div>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
        </div>
    )
}

export const SwiperTempA07 = ({ importantPartUuid }) => {
    const [Data, setData] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })
    useEffect(() => {
        runAsync({ url: 'getVideos', data: { importantPartUuid } })
    }, [importantPartUuid, runAsync])

    return (
        <div className="SwiperTempA07">
            {Data ? (
                Data.length !== 0 ? (
                    <div className="Box">
                        <Swiper
                            className="TrailerBoxList"
                            direction="vertical"
                            autoplay
                            slidesPerView={3}
                            spaceBetween={20}
                            centeredSlides
                        >
                            {Data.map((item, index) => (
                                <SwiperSlide
                                    key={`bannerSwiper${index}`}
                                    onClick={() => {
                                        if (item.videoAttachment?.fileUrl) {
                                            setOptionsCall({
                                                type: 'Annex',
                                                data: {
                                                    width: '80vw',
                                                    title: '查看附件',
                                                    url: item.videoAttachment.fileUrl,
                                                },
                                            })
                                        }
                                    }}
                                >
                                    <img src={item.coverAttachment?.fileUrl || `${imageUrl}视频背景.png`} alt="" />
                                    <div className="SwiperName">{item.tableName}</div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    </div>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const SwiperComA01 = ({ InfoTypeManageUuid }) => {
    const [Data, setData] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })

    useMount(() => {
        runAsync({
            url: 'getInfoManage',
            data: { InfoTypeManageUuid, OEventDate: 'desc', pageIndex: 1, pageSize: 10000 },
        })
    })
    return (
        <div className="SwiperComA01">
            {Data ? (
                Data.length !== 0 ? (
                    <Swiper
                        modules={[Autoplay, Pagination]}
                        className="SwiperBox"
                        loop={true}
                        autoplay={true}
                        pagination={{ clickable: true }}
                    >
                        {(() => {
                            return Data.map(({ uuid, coverUrl, tableName }) => (
                                <SwiperSlide
                                    className="SwiperItem"
                                    key={uuid}
                                    onClick={() =>
                                        setOptionsCall({ type: 'AnnexA02', data: { uuid: uuid, title: tableName } })
                                    }
                                >
                                    <img src={coverUrl} alt="" />
                                    <div>{tableName}</div>
                                </SwiperSlide>
                            ))
                        })()}
                    </Swiper>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const SwiperComA02 = ({ InfoTypeManageUuid }) => {
    const [Data, setData] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })

    useMount(() => {
        runAsync({
            url: 'getInfoManage',
            data: { InfoTypeManageUuid, OSortId: 'asc@0', pageIndex: 1, pageSize: 10000 },
        })
    })

    return (
        <div className="SwiperComA02">
            {Data ? (
                Data.length !== 0 ? (
                    <Swiper modules={[Autoplay, Pagination]} className="SwiperBox" loop={true} autoplay={true}>
                        {(() => {
                            return Data.map(({ uuid, coverUrl }) => (
                                <SwiperSlide className="SwiperItem" key={uuid}>
                                    <img src={coverUrl} alt="" />
                                </SwiperSlide>
                            ))
                        })()}
                    </Swiper>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
        </div>
    )
}

export const SwiperComA02Copy = ({ InfoTypeManageUuid }) => {
    const [Data, setData] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })

    const [OptionsCall, setOptionsCall] = useState()
    useMount(() => {
        runAsync({
            url: 'getScienceList',
            data: { DictionaryTypeUuid: InfoTypeManageUuid, OSortId: 'asc@0', pageIndex: 1, pageSize: 10000 },
        })
    })

    return (
        <div className="SwiperComA02">
            {Data ? (
                Data.length !== 0 ? (
                    <Swiper modules={[Autoplay, Pagination]} className="SwiperBox" loop={true} autoplay={true}>
                        {(() => {
                            return Data.map(item => (
                                <SwiperSlide
                                    className="SwiperItem"
                                    key={item.uuid}
                                    onClick={() => {
                                        setOptionsCall({
                                            type: 'ScienceInfoDetailsTwo',
                                            data: {
                                                title: '详情信息',
                                                data: item,
                                            },
                                        })
                                    }}
                                >
                                    <img src={item.coverUrl} alt="" />
                                </SwiperSlide>
                            ))
                        })()}
                    </Swiper>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}

            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const SwiperComA03 = ({ InfoTypeManageUuid }) => {
    const [Data, setData] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })

    useMount(() => {
        runAsync({
            url: 'getInfoManage',
            data: { InfoTypeManageUuid, OEventDate: 'desc', pageIndex: 1, pageSize: 10000 },
        })
    })

    const [OptionsCall, setOptionsCall] = useState()
    return (
        <div className="SwiperComA03">
            {Data ? (
                Data.length !== 0 ? (
                    <Swiper
                        modules={[Autoplay, Pagination]}
                        className="SwiperBox"
                        loop={true}
                        autoplay={true}
                        slidesPerView={3}
                        spaceBetween={-48}
                        centeredSlides={true}
                    >
                        {(() => {
                            return Data.map(({ uuid, coverUrl, tableName }) => (
                                <SwiperSlide
                                    className="SwiperItem"
                                    key={uuid}
                                    onClick={() =>
                                        setOptionsCall({ type: 'AnnexA02', data: { uuid: uuid, title: tableName } })
                                    }
                                >
                                    <img src={coverUrl} alt="" />
                                    <div>{tableName}</div>
                                </SwiperSlide>
                            ))
                        })()}
                    </Swiper>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const SwiperComA03Copy = ({ InfoTypeManageUuid }) => {
    const [Data, setData] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })

    useMount(() => {
        runAsync({
            url: 'getScienceList',
            data: { DictionaryTypeUuid: InfoTypeManageUuid, OSortId: 'asc@0', pageIndex: 1, pageSize: 10000 },
        })
    })

    const [OptionsCall, setOptionsCall] = useState()
    return (
        <div className="SwiperComA03">
            {Data ? (
                Data.length !== 0 ? (
                    <Swiper
                        modules={[Autoplay, Pagination]}
                        className="SwiperBox"
                        loop={true}
                        autoplay={true}
                        slidesPerView={3}
                        spaceBetween={-48}
                        centeredSlides={true}
                    >
                        {(() => {
                            return Data.map(item => (
                                <SwiperSlide
                                    className="SwiperItem"
                                    key={item.uuid}
                                    onClick={() => {
                                        setOptionsCall({
                                            type: 'ScienceInfoDetailsTwo',
                                            data: {
                                                title: '详情信息',
                                                data: item,
                                            },
                                        })
                                    }}
                                >
                                    <img src={item.coverUrl} alt="" />
                                    <div>{item.tableName}</div>
                                </SwiperSlide>
                            ))
                        })()}
                    </Swiper>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

// 建设中心首页新闻
export const XNewSwiperListA01 = ({ data }) => {
    return (
        <Swiper
            className="XNewSwiperListA01"
            modules={[Autoplay]}
            direction="vertical"
            autoplay
            loop
            slidesPerView={4}
            spaceBetween={20}
            centeredSlides
        >
            {data.length !== 0 &&
                data.map(({ uuid, tableName, coverUrl, currencyA }) => (
                    <SwiperSlide
                        key={uuid}
                        onClick={() => {
                            window.open(currencyA)
                        }}
                    >
                        <img src={coverUrl} alt="" />
                        <div>{tableName}</div>
                    </SwiperSlide>
                ))}
        </Swiper>
    )
}

// 北环科技创新A01
export const BHB61A01 = ({ data }) => {
    const [OptionsCall, setOptionsCall] = useState()

    return (
        <div className="SwiperComA01">
            {data ? (
                data.length !== 0 ? (
                    <Swiper
                        modules={[Autoplay, Pagination]}
                        className="SwiperBox"
                        loop={true}
                        autoplay={true}
                        pagination={{ clickable: true }}
                    >
                        {(() => {
                            return data.map(({ uuid, coverUrl, tableName }) => (
                                <SwiperSlide
                                    className="SwiperItem"
                                    key={uuid}
                                    onClick={() =>
                                        setOptionsCall({ type: 'AnnexA02', data: { uuid: uuid, title: tableName } })
                                    }
                                >
                                    <img src={coverUrl} alt="" />
                                    <div>{tableName}</div>
                                </SwiperSlide>
                            ))
                        })()}
                    </Swiper>
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

// 党建
export const PartyBuildingSwiper = ({ data }) => {
    return (
        <Swiper
            modules={[Navigation]}
            navigation
            onSlideChange={({ activeIndex }) => console.log('slide change', activeIndex)}
        >
            {data.map(({ uuid, coverUrl, tableName }) => (
                <SwiperSlide key={`bannerSwiper${uuid}`}>
                    <img src={coverUrl} alt="" />
                    <div className="TableName">{tableName}</div>
                </SwiperSlide>
            ))}
        </Swiper>
    )
}

// 洋浦首页
export const SwiperYangpuHome = ({ data }) => {
    return (
        <Swiper modules={[Autoplay, Parallax]} autoplay={{ delay: 6000 }} speed={1500} parallax loop>
            {data.map(({ image, title }, index) => (
                <SwiperSlide key={index}>
                    <img src={imageUrl + image} alt="" />
                    <div data-swiper-parallax="-2000">{title}</div>
                </SwiperSlide>
            ))}
        </Swiper>
    )
}
